<template>
  <div class="personalCenter">
    <main-frame :layoutDirection="'left'">
      <template #leftBox>
        <div class="leftBox">
          <div class="userInfo">
            <userCard
              :img="userInfo.avatar"
              :top-name="userInfo.account ? userInfo.account : '用户账号'"
              :second-name="userInfo.name ? userInfo.name : '用户昵称'"
            ></userCard>
            <div class="myFans">
              <i>我的身份：</i>
              <i
                ><el-tag type="success" v-if="authority.includes('Admin')" effect="dark"
                  >商家</el-tag
                >
                <el-tag type="info" v-else effect="dark">普通用户</el-tag>
              </i>
            </div>
            <div class="modificationInfo">
              <el-button type="info" round @click="showDialog">信息按钮</el-button>
              <el-button type="primary" round @click="logout">退出登录</el-button>
            </div>
          </div>
        </div>
      </template>
      <template #page><pageContent></pageContent></template>
    </main-frame>
  </div>

  <getBack :icon="getBackIcon"></getBack>

  <modificationDialog ref="dialogRef" :user-info="userInfo"></modificationDialog>
</template>

<script setup lang="ts">
import { CACHE_USERINFO } from "@/global/constants"
import { localCache } from "@/utils/cacheData"
import mainFrame from "@/components/main-frame/main-frame.vue"
import userCard from "@/components/UI-cnps/UI-card/uiCard-user/uiCard-user.vue"
import useRouterJump from "@/hooks/useRouterJump"
import modificationDialog from "@/views/PersonalCenter/cpns/modification-dialog.vue"
import pageContent from "@/views/PersonalCenter/cpns/pageContent.vue"
import getBack from "@/components/UI-cnps/getBack/getBack.vue"
import { computed, onMounted, ref, watch } from "vue"
import { getUserInfo } from "@/service/user/user"
import type { IUserInfo } from "./type"
import { InnerConfirm } from "@/utils/notificationHint"
const { routerJump } = useRouterJump()

const getBackIcon = {
  iconName: "ArrowLeftBold",
  iconColor: "#909399",
  iconSize: "32px"
}

let userInfo = ref<IUserInfo>({
  id: 0,
  account: "",
  name: "",
  address: null,
  authority: [
    {
      id: 1,
      name: "Common"
    }
  ],
  avatar: null,
  createTime: "",
  fans_counts: 0
})

/* 获取本人的身份 */
const authority = computed(() => {
  const auth: string[] = []

  userInfo.value.authority.forEach((element) => {
    auth.push(element.name)
  })

  console.log(auth)

  return auth
})

const dialogRef = ref()

function showDialog() {
  dialogRef.value!.dialogRef!.showDialog = true
}

/**
 * 请求用户信息
 */
function reqGetUserInfo() {
  getUserInfo().then((res) => {
    if (res.data.code == 200) {
      userInfo.value = res.data.data.userInfo
      localCache.setCache(CACHE_USERINFO, res.data.data.userInfo)
    }
  })
}

/**
 * 退出登录
 */
function logout() {
  InnerConfirm("是否清空缓存并退出登录").then(() => {
    localCache.clearCache()
    routerJump("push", "Home")
  })
}

onMounted(() => {
  reqGetUserInfo()

  watch(
    () => dialogRef.value!.dialogRef!.showDialog,
    () => {
      reqGetUserInfo()
    }
  )
})
</script>

<style lang="less" scoped>
.personalCenter {
  background-color: #ecf5ff;
  padding: 40px 0;
  .leftBox {
    width: 260px;
    background-color: #fff;
    border-radius: 10px;
    .userInfo {
      width: 260px;
      margin: 0 auto;
      // border-radius: 20px;
    }

    // 我的粉丝
    .myFans {
      margin: 20px auto 10px;
      color: #999999;
      text-align: center;
      font-size: 16px;
      i {
        &:nth-child(1) {
          font-size: 18px;
          letter-spacing: 0.75px;
          font-weight: 600;
          color: #777;
        }
      }
    }

    .modificationInfo {
      padding: 20px;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
